@use "../variables" as *;

.overlay-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding: 70px 40px 40px;
  background: var(--bg);

  @include scrollbar;

  > .close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 5px;
    left: 0;
    transition: left $transition-normal ease;

    &:hover {
      background: var(--bg-op-dark-ultraweak);
    }

    svg {
      fill: var(--stroke-extremestrong);
    }
  }
}

.full-width {
  .overlay-page > .close-btn {
    left: 20px;
  }
}